<template>
  <view class="page">
    <view class="search-box">
      <view class="search-input">
        <image
          class="search-input-icon"
          :src="require('@/static/img/search-icon2.png')"
        />
        <input placeholder="查询" class="search-input-put" />
        <view class="search-input-btn">搜索</view>
      </view>
    </view>
    <view class="main">
      <view class="item">
        <view class="item-title">深圳公仔岩水源</view>
        <view class="item-desc">180m² 广东省深圳市南山区人民路公仔岩180号</view>
        <view class="item-pics">
          <image
            v-for="(item, index) in 3"
            class="item-pics-pic"
            src="https://img1.baidu.com/it/u=225041176,855892897&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422"
            mode="scaleToFill"
          />
        </view>
        <view class="item-btns">
          <view class="item-btns-item">详情</view>
          <view class="item-btns-item">编辑</view>
          <view class="item-btns-item">删除</view>
        </view>
      </view>
    </view>
    <view class="btn-box">
      <button class="btn">
        <text class="btn-text" style="color: #fff">新增水源</text>
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  onLoad() {},
  methods: {
    gotoPage() {
      uni.navigateTo({
        url: "/pages/headwaters/add",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100vh;
  background: #f6f6f6;
  position: relative;
}
.search-box {
  position: sticky;
  left: 0;
  top: 0;
  width: 100%;
  height: 254rpx;
  background: #1ac678;
  padding-top: 108rpx;
  z-index: 20;
}
.search-input {
  width: 690rpx;
  height: 70rpx;
  border-radius: 53px 53px 53px 53px;
  margin: 0 auto;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 4rpx;
  padding-left: 40rpx;
  &-icon {
    width: 35rpx;
    height: 35rpx;
    margin-right: 25rpx;
  }
  &-put {
    flex: 1;
    font-size: r26rpx;
  }
  &-btn {
    width: 105rpx;
    height: 63rpx;
    background: #1ac678;
    border-radius: 53rpx;
    font-size: 28rpx;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.main {
  padding: 35rpx 30rpx;
  .item {
    padding: 35rpx 23rpx;
    background: #fff;
    &-title {
      font-size: 28rpx;
      font-weight: 800;
      color: #202020;
      margin-bottom: 21rpx;
    }
    &-desc {
      font-size: 26rpx;
      font-weight: 500;
      color: #666666;
      margin-bottom: 21rpx;
    }
    &-pics {
      display: flex;
      margin-bottom: 23rpx;
      &-pic {
        width: 182rpx;
        height: 182rpx;
        margin-right: 23rpx;
        border-radius: 18rpx;
      }
    }
    &-btns {
      display: flex;
      justify-content: flex-end;
      &-item {
        width: 105rpx;
        height: 63rpx;
        border-radius: 14rpx;
        border: 2rpx solid #e9e9e9;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26rpx;
        color: #202020;
        margin-right: 18rpx;
      }
    }
  }
}
.btn-box {
  width: 100%;
  margin-top: 80rpx;
  margin-bottom: 108rpx;
  // position: absolute;
  // bottom: 108rpx;
}
.btn {
  width: 697rpx;
  background: #1ac678;
  border-radius: 54rpx;
  margin: 0 auto;
  &-text {
    font-size: 32rpx;
    font-weight: 400;
    color: #ffffff;
  }
}
</style>
